ಫ್ರಂಟ್ಎಂಡ್ ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಟೆಸ್ಟಿಂಗ್: ನಿರಂತರ ಸುಧಾರಣೆಗಾಗಿ ಲೈಟ್‌ಹೌಸ್ ಸಿಐ ಅನ್ನು ಸಂಯೋಜಿಸುವುದು

ಇಂದಿನ ಡಿಜಿಟಲ್ ಜಗತ್ತಿನಲ್ಲಿ, ವೆಬ್‌ಸೈಟ್ ಕಾರ್ಯಕ್ಷಮತೆ (ಪರ್ಫಾರ್ಮೆನ್ಸ್) ಅತ್ಯಂತ ಮುಖ್ಯವಾಗಿದೆ. ನಿಧಾನವಾದ ಲೋಡಿಂಗ್ ಸಮಯಗಳು, ಸುಲಭಲಭ್ಯತೆಯ (accessibility) ಸಮಸ್ಯೆಗಳು, ಮತ್ತು ಕಳಪೆ ಎಸ್‌ಇಒ ಬಳಕೆದಾರರ ಅನುಭವದ ಮೇಲೆ ಹಾಗೂ ವ್ಯಾಪಾರದ ಫಲಿತಾಂಶಗಳ ಮೇಲೆ ಗಣನೀಯವಾಗಿ ಪರಿಣಾಮ ಬೀರಬಹುದು. ಫ್ರಂಟ್ಎಂಡ್ ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಟೆಸ್ಟಿಂಗ್ ಆಧುನಿಕ ಸಾಫ್ಟ್‌ವೇರ್ ಅಭಿವೃದ್ಧಿ ಜೀವನಚಕ್ರದ ಒಂದು ಅವಿಭಾಜ್ಯ ಅಂಗವಾಗಿದೆ, ಇದು ವೆಬ್‌ಸೈಟ್‌ಗಳು ಮತ್ತು ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗೆ ವೇಗವಾಗಿ, ವಿಶ್ವಾಸಾರ್ಹವಾಗಿ ಮತ್ತು ಬಳಕೆದಾರ ಸ್ನೇಹಿಯಾಗಿರುವುದನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ. ಈ ಲೇಖನವು ಲೈಟ್‌ಹೌಸ್ ಸಿಐ, ಒಂದು ಪ್ರಬಲವಾದ ಓಪನ್-ಸೋರ್ಸ್ ಟೂಲ್ ಅನ್ನು ನಿಮ್ಮ ನಿರಂತರ ಸಂಯೋಜನೆ (CI) ಪೈಪ್‌ಲೈನ್‌ನಲ್ಲಿ ಸಂಯೋಜಿಸಿ ಫ್ರಂಟ್ಎಂಡ್ ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಟೆಸ್ಟಿಂಗ್ ಅನ್ನು ಸ್ವಯಂಚಾಲಿತಗೊಳಿಸುವುದು ಮತ್ತು ನಿರಂತರ ಸುಧಾರಣೆಯನ್ನು ಸಾಧಿಸುವುದರ ಬಗ್ಗೆ ವಿವರಿಸುತ್ತದೆ.

ಫ್ರಂಟ್ಎಂಡ್ ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಟೆಸ್ಟಿಂಗ್ ಏಕೆ ಮುಖ್ಯ?

ಲೈಟ್‌ಹೌಸ್ ಸಿಐ ಬಗ್ಗೆ ತಿಳಿದುಕೊಳ್ಳುವ ಮೊದಲು, ಫ್ರಂಟ್ಎಂಡ್ ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಟೆಸ್ಟಿಂಗ್ ಏಕೆ ನಿರ್ಣಾಯಕ ಎಂಬುದನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳೋಣ:

• ಬಳಕೆದಾರರ ಅನುಭವ: ವೇಗವಾದ ಮತ್ತು ಸ್ಪಂದನಾಶೀಲ ವೆಬ್‌ಸೈಟ್ ಉತ್ತಮ ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ನೀಡುತ್ತದೆ, ಇದು ಹೆಚ್ಚಿನ ತೊಡಗಿಸಿಕೊಳ್ಳುವಿಕೆಗೆ ಮತ್ತು ಕಡಿಮೆ ಬೌನ್ಸ್ ದರಗಳಿಗೆ ಕಾರಣವಾಗುತ್ತದೆ. ಜಪಾನ್‌ನ ಟೋಕಿಯೊದಲ್ಲಿರುವ ಸಂಭಾವ್ಯ ಗ್ರಾಹಕರು ನಿಧಾನವಾಗಿ ಲೋಡ್ ಆಗುವ ಇ-ಕಾಮರ್ಸ್ ಸೈಟ್‌ನಲ್ಲಿ ಉತ್ಪನ್ನವನ್ನು ಖರೀದಿಸಲು ಪ್ರಯತ್ನಿಸುತ್ತಿದ್ದಾರೆ ಎಂದು ಊಹಿಸಿಕೊಳ್ಳಿ. ಅವರು ಬಹುಶಃ ಸೈಟ್ ಅನ್ನು ತೊರೆದು ಪರ್ಯಾಯಗಳನ್ನು ಹುಡುಕುತ್ತಾರೆ.
• ಎಸ್‌ಇಒ ಶ್ರೇಯಾಂಕ: ಗೂಗಲ್‌ನಂತಹ ಸರ್ಚ್ ಇಂಜಿನ್‌ಗಳು ವೆಬ್‌ಸೈಟ್ ವೇಗ ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಶ್ರೇಯಾಂಕದ ಅಂಶಗಳಾಗಿ ಪರಿಗಣಿಸುತ್ತವೆ. ವೇಗವಾದ ವೆಬ್‌ಸೈಟ್‌ಗಳು ಹುಡುಕಾಟ ಫಲಿತಾಂಶಗಳಲ್ಲಿ ಉನ್ನತ ಸ್ಥಾನ ಪಡೆಯುತ್ತವೆ, ಇದರಿಂದ ಹೆಚ್ಚು ಆರ್ಗ್ಯಾನಿಕ್ ಟ್ರಾಫಿಕ್ ಬರುತ್ತದೆ. ಗೂಗಲ್‌ನ ಕೋರ್ ವೆಬ್ ವೈಟಲ್ಸ್ (Core Web Vitals) ಉಪಕ್ರಮವು ಲಾರ್ಜೆಸ್ಟ್ ಕಂಟೆಂಟ್‌ಫುಲ್ ಪೇಂಟ್ (LCP), ಫಸ್ಟ್ ಇನ್‌ಪುಟ್ ಡಿಲೇ (FID), ಮತ್ತು ಕ್ಯುಮುಲೇಟಿವ್ ಲೇಔಟ್ ಶಿಫ್ಟ್ (CLS) ನಂತಹ ಅಂಶಗಳ ಮಹತ್ವವನ್ನು ಎಸ್‌ಇಒಗೆ ಒತ್ತಿಹೇಳುತ್ತದೆ.
• ಸುಲಭಲಭ್ಯತೆ (Accessibility): ಕಾರ್ಯಕ್ಷಮತೆಯ ಸುಧಾರಣೆಗಳು ಸಾಮಾನ್ಯವಾಗಿ ಅಂಗವಿಕಲ ಬಳಕೆದಾರರಿಗೆ ಉತ್ತಮ ಸುಲಭಲಭ್ಯತೆಗೆ ಕಾರಣವಾಗುತ್ತವೆ. ಆಪ್ಟಿಮೈಸ್ ಮಾಡಿದ ಕೋಡ್ ಮತ್ತು ಚಿತ್ರಗಳು ಸ್ಕ್ರೀನ್ ರೀಡರ್‌ಗಳನ್ನು ಅವಲಂಬಿಸಿರುವ ಅಥವಾ ಸೀಮಿತ ಬ್ಯಾಂಡ್‌ವಿಡ್ತ್ ಹೊಂದಿರುವ ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಸುಧಾರಿಸಬಹುದು.
• ಪರಿವರ್ತನೆ ದರಗಳು (Conversion Rates): ವೇಗವಾದ ವೆಬ್‌ಸೈಟ್ ನೇರವಾಗಿ ಪರಿವರ್ತನೆ ದರಗಳ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರಬಹುದು. ಪುಟ ಲೋಡ್ ಆಗುವ ಸಮಯದಲ್ಲಿ ಒಂದು ಸೆಕೆಂಡ್‌ನ ವಿಳಂಬವೂ ಪರಿವರ್ತನೆಗಳಲ್ಲಿ ಗಣನೀಯ ಇಳಿಕೆಗೆ ಕಾರಣವಾಗಬಹುದು ಎಂದು ಅಧ್ಯಯನಗಳು ತೋರಿಸಿವೆ. ಭಾರತದ ಮುಂಬೈನಲ್ಲಿರುವ ಬಳಕೆದಾರರು ವಿಮಾನವನ್ನು ಬುಕ್ ಮಾಡಲು ಪ್ರಯತ್ನಿಸುತ್ತಿದ್ದಾರೆ ಎಂದು ಯೋಚಿಸಿ. ನಿಧಾನವಾದ ಬುಕಿಂಗ್ ಪ್ರಕ್ರಿಯೆಯು ಅವರು ಖರೀದಿಯನ್ನು ಕೈಬಿಟ್ಟು ಪ್ರತಿಸ್ಪರ್ಧಿಯನ್ನು ಆಯ್ಕೆ ಮಾಡಲು ಕಾರಣವಾಗಬಹುದು.
• ಸಂಪನ್ಮೂಲಗಳ ಆಪ್ಟಿಮೈಸೇಶನ್: ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಟೆಸ್ಟಿಂಗ್ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಎಲ್ಲಿ ಆಪ್ಟಿಮೈಸ್ ಮಾಡಬಹುದು ಎಂಬುದನ್ನು ಗುರುತಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ, ಇದು ಸರ್ವರ್ ಮೂಲಸೌಕರ್ಯ ಮತ್ತು ಬ್ಯಾಂಡ್‌ವಿಡ್ತ್ ಬಳಕೆಯ ವಿಷಯದಲ್ಲಿ ವೆಚ್ಚ ಉಳಿತಾಯಕ್ಕೆ ಕಾರಣವಾಗುತ್ತದೆ.

ಲೈಟ್‌ಹೌಸ್ ಸಿಐ ಪರಿಚಯ

ಲೈಟ್‌ಹೌಸ್ ಸಿಐ ಒಂದು ಓಪನ್-ಸೋರ್ಸ್, ಸ್ವಯಂಚಾಲಿತ ಸಾಧನವಾಗಿದ್ದು, ನಿಮ್ಮ CI/CD ಪೈಪ್‌ಲೈನ್‌ನೊಂದಿಗೆ ಸುಲಭವಾಗಿ ಸಂಯೋಜಿಸಲು ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ. ಇದು ಗೂಗಲ್‌ನಿಂದ ಅಭಿವೃದ್ಧಿಪಡಿಸಲಾದ ಜನಪ್ರಿಯ ಆಡಿಟಿಂಗ್ ಸಾಧನವಾದ ಲೈಟ್‌ಹೌಸ್ ಅನ್ನು ಚಲಾಯಿಸುತ್ತದೆ ಮತ್ತು ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನ ಕಾರ್ಯಕ್ಷಮತೆ, ಸುಲಭಲಭ್ಯತೆ, ಎಸ್‌ಇಒ, ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು ಮತ್ತು ಪ್ರೊಗ್ರೆಸ್ಸಿವ್ ವೆಬ್ ಆಪ್ (PWA) ಅನುಸರಣೆಯ ಬಗ್ಗೆ ಒಳನೋಟಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ. ಲೈಟ್‌ಹೌಸ್ ಸಿಐ ನಿಮಗೆ ಈ ಕೆಳಗಿನವುಗಳಲ್ಲಿ ಸಹಾಯ ಮಾಡುತ್ತದೆ:

• ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಆಡಿಟ್‌ಗಳನ್ನು ಸ್ವಯಂಚಾಲಿತಗೊಳಿಸುವುದು: ಪ್ರತಿ ಕಮಿಟ್ ಅಥವಾ ಪುಲ್ ರಿಕ್ವೆಸ್ಟ್‌ನೊಂದಿಗೆ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಲೈಟ್‌ಹೌಸ್ ಆಡಿಟ್‌ಗಳನ್ನು ಚಲಾಯಿಸಿ.
• ಕಾಲಾನಂತರದಲ್ಲಿ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡುವುದು: ಕಾಲಾನಂತರದಲ್ಲಿ ಕಾರ್ಯಕ್ಷಮತೆಯ ಮೆಟ್ರಿಕ್‌ಗಳನ್ನು ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡಿ ಮತ್ತು ಹಿನ್ನಡೆಗಳನ್ನು ಬೇಗನೆ ಗುರುತಿಸಿ.
• ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಬಜೆಟ್‌ಗಳನ್ನು ಹೊಂದಿಸುವುದು: ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಬಜೆಟ್‌ಗಳನ್ನು ವಿವರಿಸಿ ಮತ್ತು ಅವು ಮೀರಿದರೆ ಬಿಲ್ಡ್‌ಗಳನ್ನು ವಿಫಲಗೊಳಿಸಿ.
• CI/CD ಸಿಸ್ಟಮ್‌ಗಳೊಂದಿಗೆ ಸಂಯೋಜಿಸುವುದು: GitHub Actions, GitLab CI, CircleCI, ಮತ್ತು Jenkins ನಂತಹ ಜನಪ್ರಿಯ CI/CD ಸಿಸ್ಟಮ್‌ಗಳೊಂದಿಗೆ ಸಂಯೋಜಿಸಿ.
• ಕಾರ್ಯಕ್ಷಮತೆಯ ಸಮಸ್ಯೆಗಳ ಮೇಲೆ ಸಹಕರಿಸುವುದು: ಲೈಟ್‌ಹೌಸ್ ವರದಿಗಳನ್ನು ಹಂಚಿಕೊಳ್ಳಿ ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆಯ ಸಮಸ್ಯೆಗಳನ್ನು ಪರಿಹರಿಸಲು ನಿಮ್ಮ ತಂಡದೊಂದಿಗೆ ಸಹಕರಿಸಿ.

ಲೈಟ್‌ಹೌಸ್ ಸಿಐ ಅನ್ನು ಸ್ಥಾಪಿಸುವುದು

ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್‌ನಲ್ಲಿ ಲೈಟ್‌ಹೌಸ್ ಸಿಐ ಅನ್ನು ಸ್ಥಾಪಿಸಲು ಹಂತ-ಹಂತದ ಮಾರ್ಗದರ್ಶಿ ಇಲ್ಲಿದೆ:

1. ಲೈಟ್‌ಹೌಸ್ ಸಿಐ ಅನ್ನು ಇನ್‌ಸ್ಟಾಲ್ ಮಾಡಿ

npm ಅಥವಾ yarn ಬಳಸಿ ಲೈಟ್‌ಹೌಸ್ ಸಿಐ CLI ಅನ್ನು ಗ್ಲೋಬಲ್ ಆಗಿ ಇನ್‌ಸ್ಟಾಲ್ ಮಾಡಿ:

            npm install -g @lhci/cli
yarn global add @lhci/cli
            

              
                Copy
              
            
          

2. ಲೈಟ್‌ಹೌಸ್ ಸಿಐ ಅನ್ನು ಕಾನ್ಫಿಗರ್ ಮಾಡಿ

ಲೈಟ್‌ಹೌಸ್ ಸಿಐ ಅನ್ನು ಕಾನ್ಫಿಗರ್ ಮಾಡಲು ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್‌ನ ರೂಟ್ ಡೈರೆಕ್ಟರಿಯಲ್ಲಿ lighthouserc.js ಫೈಲ್ ಅನ್ನು ರಚಿಸಿ. ಇಲ್ಲಿ ಒಂದು ಉದಾಹರಣೆ ಕಾನ್ಫಿಗರೇಶನ್ ಇದೆ:

            module.exports = {
  ci:
{
    collect:
{
      url: ['http://localhost:3000', 'http://localhost:3000/about'],
      startServerCommand: 'npm start',
      numberOfRuns: 3,
    },
    assert:
{
      assertions:
{
        'categories:performance': ['warn', { minScore: 0.9 }],
        'categories:accessibility': ['error', { minScore: 1 }],
        'categories:best-practices': ['warn', { minScore: 0.9 }],
        'categories:seo': ['warn', { minScore: 0.9 }],
        'categories:pwa': ['off'],
        'first-contentful-paint': ['warn', { maxNumericValue: 2500 }],
        'largest-contentful-paint': ['warn', { maxNumericValue: 4000 }],
        'total-blocking-time': ['warn', { maxNumericValue: 200 }],
        'cumulative-layout-shift': ['warn', { maxNumericValue: 0.1 }],
      },
    },
    upload:
{
      target: 'temporary-redirect',
    },
  },
};

            

              
                Copy
              
            
          

ಈ ಕಾನ್ಫಿಗರೇಶನ್ ಅನ್ನು ವಿವರಿಸೋಣ:

• collect.url: ಆಡಿಟ್ ಮಾಡಬೇಕಾದ URL ಗಳ ಪಟ್ಟಿ. ಈ ಉದಾಹರಣೆಯು ಮುಖಪುಟ ಮತ್ತು 'about' ಪುಟವನ್ನು ಆಡಿಟ್ ಮಾಡುತ್ತದೆ. ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನ ಎಲ್ಲಾ ಪ್ರಮುಖ ಪುಟಗಳನ್ನು, ವಿವಿಧ ಬಳಕೆಯ ಸಂದರ್ಭಗಳನ್ನು ಪರಿಗಣಿಸಿ, ನೀವು ಸೇರಿಸಬೇಕು. ಉದಾಹರಣೆಗೆ, ಒಂದು ಇ-ಕಾಮರ್ಸ್ ಸೈಟ್ ಮುಖಪುಟ, ಉತ್ಪನ್ನ ಪಟ್ಟಿ ಪುಟಗಳು, ಉತ್ಪನ್ನ ವಿವರ ಪುಟಗಳು, ಮತ್ತು ಚೆಕ್‌ಔಟ್ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಒಳಗೊಂಡಿರಬಹುದು.
• collect.startServerCommand: ನಿಮ್ಮ ಡೆವಲಪ್ಮೆಂಟ್ ಸರ್ವರ್ ಅನ್ನು ಪ್ರಾರಂಭಿಸಲು ಬಳಸುವ ಕಮಾಂಡ್. ಲೈಟ್‌ಹೌಸ್ ಸಿಐ ಅನ್ನು ಸ್ಥಳೀಯ ಡೆವಲಪ್ಮೆಂಟ್ ಪರಿಸರದ ವಿರುದ್ಧ ಚಲಾಯಿಸಬೇಕಾದರೆ ಇದು ಅವಶ್ಯಕ.
• collect.numberOfRuns: ಪ್ರತಿ URL ಗೆ ಲೈಟ್‌ಹೌಸ್ ಆಡಿಟ್‌ಗಳನ್ನು ಎಷ್ಟು ಬಾರಿ ಚಲಾಯಿಸಬೇಕು ಎಂಬುದನ್ನು ಸೂಚಿಸುತ್ತದೆ. ಅನೇಕ ಆಡಿಟ್‌ಗಳನ್ನು ಚಲಾಯಿಸುವುದು ನೆಟ್‌ವರ್ಕ್ ಸ್ಥಿತಿಗಳು ಮತ್ತು ಇತರ ಅಂಶಗಳಲ್ಲಿನ ವ್ಯತ್ಯಾಸಗಳನ್ನು ಕಡಿಮೆ ಮಾಡಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.
• assert.assertions: ಲೈಟ್‌ಹೌಸ್ ಆಡಿಟ್ ಫಲಿತಾಂಶಗಳನ್ನು ಮೌಲ್ಯೀಕರಿಸಲು ಬಳಸುವ ಅಸರ್ಷನ್‌ಗಳ ಒಂದು ಸೆಟ್. ಪ್ರತಿಯೊಂದು ಅಸರ್ಷನ್ ಒಂದು ಮೆಟ್ರಿಕ್ ಅಥವಾ ವರ್ಗ ಮತ್ತು ಒಂದು ಮಿತಿಯನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ. ಆ ಮಿತಿಯನ್ನು ಪೂರೈಸದಿದ್ದರೆ, ಬಿಲ್ಡ್ ವಿಫಲಗೊಳ್ಳುತ್ತದೆ. ಈ ಉದಾಹರಣೆಯು ಪರ್ಫಾರ್ಮೆನ್ಸ್, ಸುಲಭಲಭ್ಯತೆ, ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು, ಮತ್ತು ಎಸ್‌ಇಒ ವರ್ಗಗಳಿಗೆ ಮಿತಿಗಳನ್ನು ನಿಗದಿಪಡಿಸುತ್ತದೆ. ಇದು ಫಸ್ಟ್ ಕಂಟೆಂಟ್‌ಫುಲ್ ಪೇಂಟ್ (FCP), ಲಾರ್ಜೆಸ್ಟ್ ಕಂಟೆಂಟ್‌ಫುಲ್ ಪೇಂಟ್ (LCP), ಟೋಟಲ್ ಬ್ಲಾಕಿಂಗ್ ಟೈಮ್ (TBT), ಮತ್ತು ಕ್ಯುಮುಲೇಟಿವ್ ಲೇಔಟ್ ಶಿಫ್ಟ್ (CLS) ನಂತಹ ನಿರ್ದಿಷ್ಟ ಮೆಟ್ರಿಕ್‌ಗಳಿಗೂ ಮಿತಿಗಳನ್ನು ನಿಗದಿಪಡಿಸುತ್ತದೆ.
• upload.target: ಲೈಟ್‌ಹೌಸ್ ವರದಿಗಳನ್ನು ಎಲ್ಲಿ ಅಪ್‌ಲೋಡ್ ಮಾಡಬೇಕು ಎಂಬುದನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ. temporary-redirect ವರದಿಗಳನ್ನು ತಾತ್ಕಾಲಿಕ ಸಂಗ್ರಹಣಾ ಸ್ಥಳಕ್ಕೆ ಅಪ್‌ಲೋಡ್ ಮಾಡುತ್ತದೆ ಮತ್ತು ಅವುಗಳನ್ನು ಪ್ರವೇಶಿಸಲು ಒಂದು URL ಅನ್ನು ಒದಗಿಸುತ್ತದೆ. ಇತರ ಆಯ್ಕೆಗಳು ಲೈಟ್‌ಹೌಸ್ ಸಿಐ ಸರ್ವರ್ ಅಥವಾ ಗೂಗಲ್ ಕ್ಲೌಡ್ ಸ್ಟೋರೇಜ್ ಅಥವಾ ಅಮೆಜಾನ್ ಎಸ್3 ನಂತಹ ಕ್ಲೌಡ್ ಸ್ಟೋರೇಜ್ ಪರಿಹಾರಗಳನ್ನು ಬಳಸುವುದು.

3. ನಿಮ್ಮ CI/CD ಸಿಸ್ಟಮ್‌ನೊಂದಿಗೆ ಸಂಯೋಜಿಸಿ

ಮುಂದಿನ ಹಂತವೆಂದರೆ ಲೈಟ್‌ಹೌಸ್ ಸಿಐ ಅನ್ನು ನಿಮ್ಮ CI/CD ಪೈಪ್‌ಲೈನ್‌ನಲ್ಲಿ ಸಂಯೋಜಿಸುವುದು. ಇದನ್ನು GitHub Actions ನೊಂದಿಗೆ ಹೇಗೆ ಸಂಯೋಜಿಸುವುದು ಎಂಬುದಕ್ಕೆ ಇಲ್ಲಿ ಒಂದು ಉದಾಹರಣೆ ಇದೆ:

ನಿಮ್ಮ ರೆಪೊಸಿಟರಿಯಲ್ಲಿ .github/workflows/lighthouse.yml ಫೈಲ್ ಅನ್ನು ರಚಿಸಿ:

            name: Lighthouse CI

on:
  push:
    branches: [main]
  pull_request:

jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '16'
      - name: Install Dependencies
        run: npm ci
      - name: Run Lighthouse CI
        run: |          npm run build
          lhci autorun

            

              
                Copy
              
            
          

ಈ ವರ್ಕ್‌ಫ್ಲೋ ಈ ಕೆಳಗಿನ ಹಂತಗಳನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ:

• ಕೋಡ್ ಅನ್ನು ಚೆಕ್‌ಔಟ್ ಮಾಡುತ್ತದೆ.
• Node.js ಅನ್ನು ಸೆಟಪ್ ಮಾಡುತ್ತದೆ.
• ಡಿಪೆಂಡೆನ್ಸಿಗಳನ್ನು ಇನ್‌ಸ್ಟಾಲ್ ಮಾಡುತ್ತದೆ.
• ಲೈಟ್‌ಹೌಸ್ ಸಿಐ ಅನ್ನು ಚಲಾಯಿಸುತ್ತದೆ. ಈ ಹಂತವು ಮೊದಲು ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಬಿಲ್ಡ್ ಮಾಡುತ್ತದೆ (npm run build), ನಂತರ lhci autorun ಅನ್ನು ಚಲಾಯಿಸುತ್ತದೆ, ಇದು ಲೈಟ್‌ಹೌಸ್ ಆಡಿಟ್‌ಗಳನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುತ್ತದೆ ಮತ್ತು ಕಾನ್ಫಿಗರ್ ಮಾಡಲಾದ ಮಿತಿಗಳ ವಿರುದ್ಧ ಫಲಿತಾಂಶಗಳನ್ನು ಅಸರ್ಟ್ ಮಾಡುತ್ತದೆ.

ಈ ವರ್ಕ್‌ಫ್ಲೋವನ್ನು ನಿಮ್ಮ ನಿರ್ದಿಷ್ಟ CI/CD ಸಿಸ್ಟಮ್ ಮತ್ತು ಪ್ರಾಜೆಕ್ಟ್ ಅವಶ್ಯಕತೆಗಳಿಗೆ ಹೊಂದಿಸಿಕೊಳ್ಳಿ. ಉದಾಹರಣೆಗೆ, ನೀವು GitLab CI ಬಳಸುತ್ತಿದ್ದರೆ, ನೀವು ಇದೇ ರೀತಿಯ ಹಂತಗಳೊಂದಿಗೆ .gitlab-ci.yml ಫೈಲ್ ಅನ್ನು ಕಾನ್ಫಿಗರ್ ಮಾಡಬೇಕಾಗುತ್ತದೆ.

4. ಲೈಟ್‌ಹೌಸ್ ಸಿಐ ಅನ್ನು ಚಲಾಯಿಸಿ

ನಿಮ್ಮ ಬದಲಾವಣೆಗಳನ್ನು ಕಮಿಟ್ ಮಾಡಿ ಮತ್ತು ಅವುಗಳನ್ನು ನಿಮ್ಮ ರೆಪೊಸಿಟರಿಗೆ ಪುಶ್ ಮಾಡಿ. CI/CD ಪೈಪ್‌ಲೈನ್ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಲೈಟ್‌ಹೌಸ್ ಸಿಐ ಅನ್ನು ಚಲಾಯಿಸುತ್ತದೆ. ಯಾವುದೇ ಅಸರ್ಷನ್‌ಗಳು ವಿಫಲವಾದರೆ, ಬಿಲ್ಡ್ ವಿಫಲಗೊಳ್ಳುತ್ತದೆ, ಇದು ಡೆವಲಪರ್‌ಗಳಿಗೆ ಅಮೂಲ್ಯವಾದ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ನೀಡುತ್ತದೆ. ಲೈಟ್‌ಹೌಸ್ ಸಿಐ ವರದಿಗಳು CI/CD ಸಿಸ್ಟಮ್ ಒದಗಿಸಿದ URL ನಲ್ಲಿ ಲಭ್ಯವಿರುತ್ತವೆ.

ಸುಧಾರಿತ ಕಾನ್ಫಿಗರೇಶನ್ ಮತ್ತು ಕಸ್ಟಮೈಸೇಶನ್

ಲೈಟ್‌ಹೌಸ್ ಸಿಐ ವ್ಯಾಪಕ ಶ್ರೇಣಿಯ ಕಾನ್ಫಿಗರೇಶನ್ ಆಯ್ಕೆಗಳು ಮತ್ತು ಕಸ್ಟಮೈಸೇಶನ್ ಸಾಧ್ಯತೆಗಳನ್ನು ನೀಡುತ್ತದೆ. ಇಲ್ಲಿ ಕೆಲವು ಸುಧಾರಿತ ವೈಶಿಷ್ಟ್ಯಗಳಿವೆ:

1. ಲೈಟ್‌ಹೌಸ್ ಸಿಐ ಸರ್ವರ್ ಅನ್ನು ಬಳಸುವುದು

ಲೈಟ್‌ಹೌಸ್ ಸಿಐ ಸರ್ವರ್ ಕಾಲಾನಂತರದಲ್ಲಿ ಕಾರ್ಯಕ್ಷಮತೆಯ ಮೆಟ್ರಿಕ್‌ಗಳನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡಲು, ಪ್ರಾಜೆಕ್ಟ್‌ಗಳನ್ನು ನಿರ್ವಹಿಸಲು, ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆಯ ಸಮಸ್ಯೆಗಳ ಮೇಲೆ ಸಹಕರಿಸಲು ಒಂದು ಕೇಂದ್ರೀಕೃತ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್ ಅನ್ನು ಒದಗಿಸುತ್ತದೆ. ಲೈಟ್‌ಹೌಸ್ ಸಿಐ ಸರ್ವರ್ ಅನ್ನು ಬಳಸಲು, ನೀವು ಒಂದು ಇನ್‌ಸ್ಟನ್ಸ್ ಅನ್ನು ಸೆಟಪ್ ಮಾಡಬೇಕು ಮತ್ತು ನಿಮ್ಮ lighthouserc.js ಫೈಲ್ ಅನ್ನು ಸರ್ವರ್‌ಗೆ ವರದಿಗಳನ್ನು ಅಪ್‌ಲೋಡ್ ಮಾಡಲು ಕಾನ್ಫಿಗರ್ ಮಾಡಬೇಕು.

ಮೊದಲಿಗೆ, ಸರ್ವರ್ ಅನ್ನು ಡಿಪ್ಲಾಯ್ ಮಾಡಿ. Docker, Heroku, ಮತ್ತು AWS ಹಾಗೂ Google Cloud ನಂತಹ ಕ್ಲೌಡ್ ಪ್ರೊವೈಡರ್‌ಗಳು ಸೇರಿದಂತೆ ವಿವಿಧ ಡಿಪ್ಲಾಯ್‌ಮೆಂಟ್ ಆಯ್ಕೆಗಳು ಲಭ್ಯವಿದೆ. ಸರ್ವರ್ ಅನ್ನು ಡಿಪ್ಲಾಯ್ ಮಾಡುವ ಬಗ್ಗೆ ವಿವರವಾದ ಸೂಚನೆಗಳಿಗಾಗಿ ಲೈಟ್‌ಹೌಸ್ ಸಿಐ ದಸ್ತಾವೇಜನ್ನು ನೋಡಿ.

ಸರ್ವರ್ ಚಾಲನೆಯಲ್ಲಿದ್ದ ನಂತರ, ನಿಮ್ಮ lighthouserc.js ಫೈಲ್ ಅನ್ನು ಸರ್ವರ್‌ಗೆ ಪಾಯಿಂಟ್ ಮಾಡಲು ಅಪ್‌ಡೇಟ್ ಮಾಡಿ:

            module.exports = {
  ci:
{
    collect: {
      url: ['http://localhost:3000'],
      startServerCommand: 'npm start',
    },
    assert: {
      assertions: {
        'categories:performance': ['warn', { minScore: 0.9 }],
      },
    },
    upload:
{
      target: 'lhci',
      serverBaseUrl: 'YOUR_LHCI_SERVER_URL',
      token: 'YOUR_LHCI_SERVER_TOKEN',
    },
  },
};

            

              
                Copy
              
            
          

YOUR_LHCI_SERVER_URL ಅನ್ನು ನಿಮ್ಮ ಲೈಟ್‌ಹೌಸ್ ಸಿಐ ಸರ್ವರ್‌ನ URL ನೊಂದಿಗೆ ಮತ್ತು YOUR_LHCI_SERVER_TOKEN ಅನ್ನು ಸರ್ವರ್‌ನಿಂದ ರಚಿಸಲಾದ ಟೋಕನ್‌ನೊಂದಿಗೆ ಬದಲಾಯಿಸಿ. ಟೋಕನ್ ನಿಮ್ಮ CI ಪೈಪ್‌ಲೈನ್ ಅನ್ನು ಸರ್ವರ್‌ನೊಂದಿಗೆ ದೃಢೀಕರಿಸುತ್ತದೆ.

2. ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಬಜೆಟ್‌ಗಳನ್ನು ಹೊಂದಿಸುವುದು

ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಬಜೆಟ್‌ಗಳು ನಿರ್ದಿಷ್ಟ ಮೆಟ್ರಿಕ್‌ಗಳಿಗೆ ಸ್ವೀಕಾರಾರ್ಹ ಮಿತಿಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತವೆ. ಲೈಟ್‌ಹೌಸ್ ಸಿಐ ನಿಮಗೆ ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಬಜೆಟ್‌ಗಳನ್ನು ಹೊಂದಿಸಲು ಮತ್ತು ಆ ಬಜೆಟ್‌ಗಳು ಮೀರಿದರೆ ಬಿಲ್ಡ್‌ಗಳನ್ನು ವಿಫಲಗೊಳಿಸಲು ಅನುಮತಿಸುತ್ತದೆ. ಇದು ಕಾರ್ಯಕ್ಷಮತೆಯ ಹಿನ್ನಡೆಗಳನ್ನು ತಡೆಯಲು ಮತ್ತು ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್ ಸ್ವೀಕಾರಾರ್ಹ ಕಾರ್ಯಕ್ಷಮತೆಯ ಮಿತಿಗಳಲ್ಲಿ ಉಳಿಯುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.

ನೀವು ನಿಮ್ಮ lighthouserc.js ಫೈಲ್‌ನಲ್ಲಿ assert.assertions ಪ್ರಾಪರ್ಟಿ ಬಳಸಿ ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಬಜೆಟ್‌ಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಬಹುದು. ಉದಾಹರಣೆಗೆ, ಫಸ್ಟ್ ಕಂಟೆಂಟ್‌ಫುಲ್ ಪೇಂಟ್ (FCP) ಗಾಗಿ ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಬಜೆಟ್ ಅನ್ನು ಹೊಂದಿಸಲು, ನೀವು ಈ ಕೆಳಗಿನ ಅಸರ್ಷನ್ ಅನ್ನು ಸೇರಿಸಬಹುದು:

            'first-contentful-paint': ['warn', { maxNumericValue: 2500 }],
            

              
                Copy
              
            
          

FCP 2500 ಮಿಲಿಸೆಕೆಂಡ್‌ಗಳಿಗಿಂತ ಹೆಚ್ಚಿದ್ದರೆ ಈ ಅಸರ್ಷನ್ ಬಿಲ್ಡ್ ಅನ್ನು ವಿಫಲಗೊಳಿಸುತ್ತದೆ.

3. ಲೈಟ್‌ಹೌಸ್ ಕಾನ್ಫಿಗರೇಶನ್ ಅನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡುವುದು

ಲೈಟ್‌ಹೌಸ್ ಸಿಐ ನಿಮ್ಮ ನಿರ್ದಿಷ್ಟ ಅಗತ್ಯಗಳಿಗೆ ಸರಿಹೊಂದುವಂತೆ ಲೈಟ್‌ಹೌಸ್ ಕಾನ್ಫಿಗರೇಶನ್ ಅನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ನೀವು ವಿವಿಧ ಲೈಟ್‌ಹೌಸ್ ಸೆಟ್ಟಿಂಗ್‌ಗಳನ್ನು ಕಾನ್ಫಿಗರ್ ಮಾಡಬಹುದು, ಉದಾಹರಣೆಗೆ:

• onlyAudits: ಚಲಾಯಿಸಬೇಕಾದ ಆಡಿಟ್‌ಗಳ ಪಟ್ಟಿಯನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಿ.
• skipAudits: ಸ್ಕಿಪ್ ಮಾಡಬೇಕಾದ ಆಡಿಟ್‌ಗಳ ಪಟ್ಟಿಯನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಿ.
• throttling: ವಿವಿಧ ನೆಟ್‌ವರ್ಕ್ ಪರಿಸ್ಥಿತಿಗಳನ್ನು ಅನುಕರಿಸಲು ನೆಟ್‌ವರ್ಕ್ ಥ್ರೊಟ್ಲಿಂಗ್ ಸೆಟ್ಟಿಂಗ್‌ಗಳನ್ನು ಕಾನ್ಫಿಗರ್ ಮಾಡಿ.
• formFactor: ಅನುಕರಿಸಬೇಕಾದ ಫಾರ್ಮ್ ಫ್ಯಾಕ್ಟರ್ (ಡೆಸ್ಕ್‌ಟಾಪ್ ಅಥವಾ ಮೊಬೈಲ್) ಅನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಿ.
• screenEmulation: ಸ್ಕ್ರೀನ್ ಎಮ್ಯುಲೇಶನ್ ಸೆಟ್ಟಿಂಗ್‌ಗಳನ್ನು ಕಾನ್ಫಿಗರ್ ಮಾಡಿ.

ಲೈಟ್‌ಹೌಸ್ ಕಾನ್ಫಿಗರೇಶನ್ ಅನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಲು, ನೀವು lhci autorun ಕಮಾಂಡ್‌ಗೆ --config-path ಫ್ಲ್ಯಾಗ್ ಅನ್ನು ಪಾಸ್ ಮಾಡಬಹುದು, ಅದು ಕಸ್ಟಮ್ ಲೈಟ್‌ಹೌಸ್ ಕಾನ್ಫಿಗರೇಶನ್ ಫೈಲ್‌ಗೆ ಪಾಯಿಂಟ್ ಮಾಡುತ್ತದೆ. ಕಾನ್ಫಿಗರೇಶನ್ ಆಯ್ಕೆಗಳ ಸಂಪೂರ್ಣ ಪಟ್ಟಿಗಾಗಿ ಲೈಟ್‌ಹೌಸ್ ದಸ್ತಾವೇಜನ್ನು ನೋಡಿ.

4. ದೃಢೀಕರಿಸಿದ ಪುಟಗಳನ್ನು ಆಡಿಟ್ ಮಾಡುವುದು

ದೃಢೀಕರಿಸಿದ ಪುಟಗಳನ್ನು ಆಡಿಟ್ ಮಾಡಲು ಸ್ವಲ್ಪ ವಿಭಿನ್ನವಾದ ವಿಧಾನದ ಅಗತ್ಯವಿದೆ. ಆಡಿಟ್‌ಗಳನ್ನು ಚಲಾಯಿಸುವ ಮೊದಲು ದೃಢೀಕರಿಸಲು ಲೈಟ್‌ಹೌಸ್ ಸಿಐಗೆ ನೀವು ಒಂದು ಮಾರ್ಗವನ್ನು ಒದಗಿಸಬೇಕಾಗುತ್ತದೆ. ಇದನ್ನು ಕುಕೀಗಳನ್ನು ಬಳಸಿ ಅಥವಾ ಲಾಗಿನ್ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಸ್ಕ್ರಿಪ್ಟ್ ಮಾಡುವ ಮೂಲಕ ಸಾಧಿಸಬಹುದು.

ಒಂದು ಸಾಮಾನ್ಯ ವಿಧಾನವೆಂದರೆ ದೃಢೀಕರಣ ಕುಕೀಗಳನ್ನು ಲೈಟ್‌ಹೌಸ್ ಸಿಐಗೆ ಪಾಸ್ ಮಾಡಲು --extra-headers ಫ್ಲ್ಯಾಗ್ ಅನ್ನು ಬಳಸುವುದು. ವೆಬ್‌ಸೈಟ್‌ಗೆ ಲಾಗಿನ್ ಆದ ನಂತರ ನಿಮ್ಮ ಬ್ರೌಸರ್‌ನ ಡೆವಲಪರ್ ಟೂಲ್ಸ್‌ನಿಂದ ನೀವು ಕುಕೀಗಳನ್ನು ಪಡೆಯಬಹುದು.

ಪರ್ಯಾಯವಾಗಿ, ನೀವು ಲಾಗಿನ್ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಸ್ವಯಂಚಾಲಿತಗೊಳಿಸಲು ಮತ್ತು ನಂತರ ದೃಢೀಕರಿಸಿದ ಪುಟಗಳಲ್ಲಿ ಲೈಟ್‌ಹೌಸ್ ಆಡಿಟ್‌ಗಳನ್ನು ಚಲಾಯಿಸಲು Puppeteer ಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಬಳಸಬಹುದು. ಈ ವಿಧಾನವು ಹೆಚ್ಚು ನಮ್ಯತೆಯನ್ನು ಒದಗಿಸುತ್ತದೆ ಮತ್ತು ಸಂಕೀರ್ಣ ದೃಢೀಕರಣ ಸನ್ನಿವೇಶಗಳನ್ನು ನಿಭಾಯಿಸಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.ಲೈಟ್‌ಹೌಸ್ ಸಿಐ ನೊಂದಿಗೆ ಫ್ರಂಟ್ಎಂಡ್ ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಟೆಸ್ಟಿಂಗ್‌ಗಾಗಿ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು

ಲೈಟ್‌ಹೌಸ್ ಸಿಐನ ಪ್ರಯೋಜನಗಳನ್ನು ಗರಿಷ್ಠಗೊಳಿಸಲು, ಈ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಅನುಸರಿಸಿ:

• ಲೈಟ್‌ಹೌಸ್ ಸಿಐ ಅನ್ನು ನಿಯಮಿತವಾಗಿ ಚಲಾಯಿಸಿ: ಪ್ರತಿ ಕಮಿಟ್ ಅಥವಾ ಪುಲ್ ರಿಕ್ವೆಸ್ಟ್‌ನೊಂದಿಗೆ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಆಡಿಟ್‌ಗಳನ್ನು ಚಲಾಯಿಸಲು ಲೈಟ್‌ಹೌಸ್ ಸಿಐ ಅನ್ನು ನಿಮ್ಮ CI/CD ಪೈಪ್‌ಲೈನ್‌ನಲ್ಲಿ ಸಂಯೋಜಿಸಿ. ಇದು ಕಾರ್ಯಕ್ಷಮತೆಯ ಹಿನ್ನಡೆಗಳನ್ನು ಬೇಗನೆ ಪತ್ತೆಹಚ್ಚಿ ಮತ್ತು ತಕ್ಷಣವೇ ಪರಿಹರಿಸುವುದನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ.
• ವಾಸ್ತವಿಕ ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಬಜೆಟ್‌ಗಳನ್ನು ಹೊಂದಿಸಿ: ಸವಾಲಿನದಾಗಿದ್ದರೂ ಸಾಧಿಸಬಹುದಾದ ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಬಜೆಟ್‌ಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಿ. ಸಂಪ್ರದಾಯವಾದಿ ಬಜೆಟ್‌ಗಳೊಂದಿಗೆ ಪ್ರಾರಂಭಿಸಿ ಮತ್ತು ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನ ಕಾರ್ಯಕ್ಷಮತೆ ಸುಧಾರಿಸಿದಂತೆ ಅವುಗಳನ್ನು ಕ್ರಮೇಣ ಬಿಗಿಗೊಳಿಸಿ. ಪುಟಗಳ ಸಂಕೀರ್ಣತೆ ಮತ್ತು ಪ್ರಾಮುಖ್ಯತೆಗೆ ಅನುಗುಣವಾಗಿ ವಿವಿಧ ರೀತಿಯ ಪುಟಗಳಿಗೆ ವಿಭಿನ್ನ ಬಜೆಟ್‌ಗಳನ್ನು ಹೊಂದಿಸುವುದನ್ನು ಪರಿಗಣಿಸಿ.
• ಪ್ರಮುಖ ಮೆಟ್ರಿಕ್‌ಗಳ ಮೇಲೆ ಗಮನಹರಿಸಿ: ಬಳಕೆದಾರರ ಅನುಭವ ಮತ್ತು ವ್ಯಾಪಾರದ ಫಲಿತಾಂಶಗಳ ಮೇಲೆ ಹೆಚ್ಚು ಪರಿಣಾಮ ಬೀರುವ ಪ್ರಮುಖ ಕಾರ್ಯಕ್ಷಮತೆಯ ಮೆಟ್ರಿಕ್‌ಗಳಿಗೆ ಆದ್ಯತೆ ನೀಡಿ. ಗೂಗಲ್‌ನ ಕೋರ್ ವೆಬ್ ವೈಟಲ್ಸ್ (LCP, FID, ಮತ್ತು CLS) ಉತ್ತಮ ಆರಂಭಿಕ ಹಂತವಾಗಿದೆ.
• ಕಾರ್ಯಕ್ಷಮತೆಯ ಸಮಸ್ಯೆಗಳನ್ನು ತನಿಖೆ ಮಾಡಿ ಮತ್ತು ಪರಿಹರಿಸಿ: ಲೈಟ್‌ಹೌಸ್ ಸಿಐ ಕಾರ್ಯಕ್ಷಮತೆಯ ಸಮಸ್ಯೆಗಳನ್ನು ಗುರುತಿಸಿದಾಗ, ಅವುಗಳನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ತನಿಖೆ ಮಾಡಿ ಮತ್ತು ಸೂಕ್ತ ಪರಿಹಾರಗಳನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಿ. ಸಮಸ್ಯೆಗಳ ಮೂಲ ಕಾರಣಗಳನ್ನು ಗುರುತಿಸಲು ಮತ್ತು ಅತ್ಯಂತ ಪರಿಣಾಮಕಾರಿ ಪರಿಹಾರಗಳಿಗೆ ಆದ್ಯತೆ ನೀಡಲು ಲೈಟ್‌ಹೌಸ್ ವರದಿಗಳನ್ನು ಬಳಸಿ.
• ಕಾಲಾನಂತರದಲ್ಲಿ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡಿ: ಪ್ರವೃತ್ತಿಗಳು ಮತ್ತು ಮಾದರಿಗಳನ್ನು ಗುರುತಿಸಲು ಕಾಲಾನಂತರದಲ್ಲಿ ಕಾರ್ಯಕ್ಷಮತೆಯ ಮೆಟ್ರಿಕ್‌ಗಳನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡಿ. ಕಾರ್ಯಕ್ಷಮತೆಯ ಡೇಟಾವನ್ನು ದೃಶ್ಯೀಕರಿಸಲು ಮತ್ತು ಸುಧಾರಣೆಯ ಕ್ಷೇತ್ರಗಳನ್ನು ಗುರುತಿಸಲು ಲೈಟ್‌ಹೌಸ್ ಸಿಐ ಸರ್ವರ್ ಅಥವಾ ಇತರ ಮೇಲ್ವಿಚಾರಣಾ ಸಾಧನಗಳನ್ನು ಬಳಸಿ.
• ನಿಮ್ಮ ತಂಡಕ್ಕೆ ಶಿಕ್ಷಣ ನೀಡಿ: ಫ್ರಂಟ್ಎಂಡ್ ಕಾರ್ಯಕ್ಷಮತೆಯ ಪ್ರಾಮುಖ್ಯತೆ ಮತ್ತು ಲೈಟ್‌ಹೌಸ್ ಸಿಐ ಅನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಹೇಗೆ ಬಳಸುವುದು ಎಂಬುದನ್ನು ನಿಮ್ಮ ತಂಡವು ಅರ್ಥಮಾಡಿಕೊಂಡಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ಅವರ ಕೌಶಲ್ಯ ಮತ್ತು ಜ್ಞಾನವನ್ನು ಸುಧಾರಿಸಲು ಸಹಾಯ ಮಾಡಲು ತರಬೇತಿ ಮತ್ತು ಸಂಪನ್ಮೂಲಗಳನ್ನು ಒದಗಿಸಿ.
• ಜಾಗತಿಕ ನೆಟ್‌ವರ್ಕ್ ಸ್ಥಿತಿಗಳನ್ನು ಪರಿಗಣಿಸಿ: ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಬಜೆಟ್‌ಗಳನ್ನು ಹೊಂದಿಸುವಾಗ, ಪ್ರಪಂಚದ ವಿವಿಧ ಭಾಗಗಳಲ್ಲಿನ ನೆಟ್‌ವರ್ಕ್ ಸ್ಥಿತಿಗಳನ್ನು ಪರಿಗಣಿಸಿ. ನಿಧಾನಗತಿಯ ಇಂಟರ್ನೆಟ್ ವೇಗವಿರುವ ಪ್ರದೇಶಗಳಲ್ಲಿನ ಬಳಕೆದಾರರು ವೇಗದ ವೇಗವಿರುವ ಪ್ರದೇಶಗಳಲ್ಲಿನ ಬಳಕೆದಾರರಿಗಿಂತ ವಿಭಿನ್ನ ಅನುಭವವನ್ನು ಹೊಂದಿರಬಹುದು. ಪರೀಕ್ಷೆಯ ಸಮಯದಲ್ಲಿ ವಿವಿಧ ನೆಟ್‌ವರ್ಕ್ ಸ್ಥಿತಿಗಳನ್ನು ಅನುಕರಿಸಲು ಸಾಧನಗಳನ್ನು ಬಳಸಿ.
• ಚಿತ್ರಗಳನ್ನು ಆಪ್ಟಿಮೈಸ್ ಮಾಡಿ: ಚಿತ್ರ ಆಪ್ಟಿಮೈಸೇಶನ್ ಫ್ರಂಟ್ಎಂಡ್ ಕಾರ್ಯಕ್ಷಮತೆಯ ಒಂದು ನಿರ್ಣಾಯಕ ಅಂಶವಾಗಿದೆ. ಗುಣಮಟ್ಟವನ್ನು ಕಳೆದುಕೊಳ್ಳದೆ ಚಿತ್ರಗಳನ್ನು ಸಂಕುಚಿತಗೊಳಿಸಲು ಮತ್ತು ಆಪ್ಟಿಮೈಸ್ ಮಾಡಲು ImageOptim, TinyPNG, ಅಥವಾ ಆನ್‌ಲೈನ್ ಪರಿವರ್ತಕಗಳಂತಹ ಸಾಧನಗಳನ್ನು ಬಳಸಿ. WebP ನಂತಹ ಆಧುನಿಕ ಚಿತ್ರ ಸ್ವರೂಪಗಳನ್ನು ಬಳಸಿ, ಇದು JPEG ಮತ್ತು PNG ನಂತಹ ಸಾಂಪ್ರದಾಯಿಕ ಸ್ವರೂಪಗಳಿಗಿಂತ ಉತ್ತಮ ಸಂಕೋಚನ ಮತ್ತು ಗುಣಮಟ್ಟವನ್ನು ನೀಡುತ್ತದೆ. ತಕ್ಷಣವೇ ವ್ಯೂಪೋರ್ಟ್‌ನಲ್ಲಿ ಗೋಚರಿಸದ ಚಿತ್ರಗಳಿಗೆ ಲೇಜಿ ಲೋಡಿಂಗ್ ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಿ.
• ಕೋಡ್ ಅನ್ನು ಮಿನಿಫೈ ಮತ್ತು ಕಂಪ್ರೆಸ್ ಮಾಡಿ: ಫೈಲ್ ಗಾತ್ರಗಳನ್ನು ಕಡಿಮೆ ಮಾಡಲು ನಿಮ್ಮ HTML, CSS, ಮತ್ತು JavaScript ಕೋಡ್ ಅನ್ನು ಮಿನಿಫೈ ಮಾಡಿ. UglifyJS, Terser, ಅಥವಾ ಆನ್‌ಲೈನ್ ಮಿನಿಫೈಯರ್‌ಗಳಂತಹ ಸಾಧನಗಳನ್ನು ಬಳಸಿ. ವರ್ಗಾಯಿಸಲಾದ ಫೈಲ್‌ಗಳ ಗಾತ್ರವನ್ನು ಮತ್ತಷ್ಟು ಕಡಿಮೆ ಮಾಡಲು ನಿಮ್ಮ ಸರ್ವರ್‌ನಲ್ಲಿ Gzip ಅಥವಾ Brotli ಸಂಕೋಚನವನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಿ.
• ಬ್ರೌಸರ್ ಕ್ಯಾಶಿಂಗ್ ಅನ್ನು ಬಳಸಿಕೊಳ್ಳಿ: ಚಿತ್ರಗಳು, CSS, ಮತ್ತು JavaScript ಫೈಲ್‌ಗಳಂತಹ ಸ್ಟ್ಯಾಟಿಕ್ ಸ್ವತ್ತುಗಳಿಗೆ ಸೂಕ್ತವಾದ ಕ್ಯಾಶ್ ಹೆಡರ್‌ಗಳನ್ನು ಹೊಂದಿಸಲು ನಿಮ್ಮ ಸರ್ವರ್ ಅನ್ನು ಕಾನ್ಫಿಗರ್ ಮಾಡಿ. ಇದು ಬ್ರೌಸರ್‌ಗಳಿಗೆ ಈ ಸ್ವತ್ತುಗಳನ್ನು ಕ್ಯಾಶ್ ಮಾಡಲು ಮತ್ತು ಅವುಗಳನ್ನು ಪದೇ ಪದೇ ಡೌನ್‌ಲೋಡ್ ಮಾಡುವುದನ್ನು ತಪ್ಪಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.

ತೀರ್ಮಾನ

ನಿಮ್ಮ ಡೆವಲಪ್ಮೆಂಟ್ ವರ್ಕ್‌ಫ್ಲೋನಲ್ಲಿ ಲೈಟ್‌ಹೌಸ್ ಸಿಐ ಅನ್ನು ಸಂಯೋಜಿಸುವುದು ಉನ್ನತ-ಕಾರ್ಯಕ್ಷಮತೆಯ, ಸುಲಭಲಭ್ಯತೆಯ, ಮತ್ತು ಎಸ್‌ಇಒ-ಸ್ನೇಹಿ ವೆಬ್‌ಸೈಟ್‌ಗಳನ್ನು ನಿರ್ಮಿಸುವ ನಿಟ್ಟಿನಲ್ಲಿ ಒಂದು ನಿರ್ಣಾಯಕ ಹಂತವಾಗಿದೆ. ಫ್ರಂಟ್ಎಂಡ್ ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಟೆಸ್ಟಿಂಗ್ ಅನ್ನು ಸ್ವಯಂಚಾಲಿತಗೊಳಿಸುವ ಮತ್ತು ಕಾಲಾನಂತರದಲ್ಲಿ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡುವ ಮೂಲಕ, ನೀವು ಕಾರ್ಯಕ್ಷಮತೆಯ ಸಮಸ್ಯೆಗಳನ್ನು ಬೇಗನೆ ಗುರುತಿಸಿ ಮತ್ತು ಪರಿಹರಿಸಬಹುದು, ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಸುಧಾರಿಸಬಹುದು, ಮತ್ತು ವ್ಯಾಪಾರದ ಫಲಿತಾಂಶಗಳನ್ನು ಹೆಚ್ಚಿಸಬಹುದು. ಲೈಟ್‌ಹೌಸ್ ಸಿಐ ಅನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳಿ ಮತ್ತು ನಿರಂತರ ಕಾರ್ಯಕ್ಷಮತೆ ಸುಧಾರಣೆಯನ್ನು ನಿಮ್ಮ ಅಭಿವೃದ್ಧಿ ಪ್ರಕ್ರಿಯೆಯಲ್ಲಿ ಒಂದು ಪ್ರಮುಖ ಮೌಲ್ಯವನ್ನಾಗಿ ಮಾಡಿ. ವೆಬ್‌ಸೈಟ್ ಕಾರ್ಯಕ್ಷಮತೆಯು ಒಂದು-ಬಾರಿಯ ಪ್ರಯತ್ನವಲ್ಲ, ಆದರೆ ನಿರಂತರ ಗಮನ ಮತ್ತು ಆಪ್ಟಿಮೈಸೇಶನ್ ಅಗತ್ಯವಿರುವ ನಿರಂತರ ಪ್ರಕ್ರಿಯೆ ಎಂಬುದನ್ನು ನೆನಪಿಡಿ. ನಿಮ್ಮ ಎಲ್ಲಾ ಬಳಕೆದಾರರಿಗೆ, ಅವರ ಸ್ಥಳ ಅಥವಾ ಸಾಧನವನ್ನು ಲೆಕ್ಕಿಸದೆ, ಸುಗಮ ಅನುಭವವನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಸಾಂಸ್ಕೃತಿಕ ಮತ್ತು ಪ್ರಾದೇಶಿಕ ಅಂಶಗಳನ್ನು ಪರಿಗಣಿಸಿ. ಈ ಲೇಖನದಲ್ಲಿ ವಿವರಿಸಲಾದ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಅನುಸರಿಸುವ ಮೂಲಕ, ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್ ವಿಶ್ವಾದ್ಯಂತ ಬಳಕೆದಾರರಿಗೆ ವೇಗವಾದ, ವಿಶ್ವಾಸಾರ್ಹ, ಮತ್ತು ಆನಂದದಾಯಕ ಅನುಭವವನ್ನು ನೀಡುತ್ತದೆ ಎಂದು ನೀವು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಬಹುದು.